<template>
  <!-- 登录页面 -->
  <div class="login">
    <div class="loginContainer">
      <el-form
        class="loginForm"
        :model="loginForm"
        ref="loginForm"
        :rules="rules"
      >
        <el-tabs type="border-card">
          <el-tab-pane>
            <span slot="label">密码登录</span>
            <el-form-item label="" prop="mail">
              <el-input v-model="loginForm.mail" placeholder="邮箱"></el-input>
            </el-form-item>
            <el-form-item label="" prop="password">
              <el-input
                v-model="loginForm.password"
                type="password"
                placeholder="密码"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-button class="btn" type="primary" @click="login()"
                    >登录</el-button
                  >
                </el-col>
                <el-col :span="12">
                  <el-button class="btn" @click="toRegister()">注册</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="邮箱登录">
            <el-form-item label="" prop="mail">
              <el-input v-model="loginForm.mail" placeholder="邮箱"></el-input>
            </el-form-item>
            <el-form-item label="" prop="code">
              <el-row :gutter="0">
                <el-col :span="12">
                  <el-input
                    v-model="loginForm.code"
                    placeholder="请输入验证码"
                  ></el-input>
                </el-col>
                <el-col :span="8" :offset="2">
                  <el-button
                    class="btn"
                    type="primary"
                    @click="getCode()"
                    btnTitle="btnTitle"
                    :disabled="disabled"
                    >{{ btnTitle }}</el-button
                  >
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-button class="btn" type="primary" @click="loginByMail()"
                    >登录</el-button
                  >
                </el-col>
                <el-col :span="12">
                  <el-button class="btn" @click="toRegister">注册</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-tab-pane>
          <!-- <el-tab-pane label="手机登录">
            <el-form-item label="" prop="mail">
              <el-input
                v-model="loginForm.mail"
                placeholder="手机号码"
              ></el-input>
            </el-form-item>
            <el-form-item label="" prop="code">
              <el-row :gutter="0">
                <el-col :span="12">
                  <el-input
                    v-model="loginForm.code"
                    placeholder="请输入验证码"
                  ></el-input>
                </el-col>
                <el-col :span="8" :offset="2">
                  <el-button
                    class="btn"
                    type="primary"
                    @click="getCode()"
                    btnTitle="btnTitle"
                    :disabled="disabled"
                    >{{ btnTitle }}</el-button
                  >
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-button class="btn" type="primary" @click="loginByMail()"
                    >登录</el-button
                  >
                </el-col>
                <el-col :span="12">
                  <el-button class="btn" @click="toRegister">注册</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-tab-pane> -->
        </el-tabs>
      </el-form>
    </div>
  </div>
</template>

<script>
import { login, loginByEmail, getAuthCode } from "@/api/userApi.js";
import qs from "qs";
import md5 from "js-md5";
export default {
  data() {
    var validateMail = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入邮箱"));
      } else if (
        !/^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(
          value
        )
      ) {
        callback(new Error("请输入正确的邮箱"));
      }
      callback();
    };

    return {
      btnTitle: "获取验证码",
      disabled: false,
      loginForm: {
        mail: "", //邮箱
        password: "", //密码
        code: "", //验证码
      },
      rules: {
        mail: [
          {
            validator: validateMail,
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            message: "请输入密码",
          },
        ],
        code: [
          {
            required: true,
            trigger: "blur",
            message: "请输入验证码",
          },
        ],
      },
    };
  },
  methods: {
    //登录
    login() {
      login(
        qs.stringify({
          mailOrPhone: this.loginForm.mail,
          password: md5(md5(this.loginForm.password)),
        })
      )
        .then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: res.data.message,
              type: "success",
              duration: 1000,
            });
       
            sessionStorage.setItem("avatar", res.data.data.avatar);
            sessionStorage.setItem("name", res.data.data.name);
            sessionStorage.setItem("token", res.data.data.token);
            sessionStorage.setItem("id", res.data.data.userId);

            this.$router.push("/dashboard");
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
              duration: 1000,
            });
          }
        })
        .catch((err) => {
          this.$message({
            message: err.message,
            type: "error",
            duration: 1000,
          });
        });
    },
    getCode() {
      if (this.loginForm.mail) {
        getAuthCode(
          qs.stringify({
            mail: this.loginForm.mail,
          })
        )
          .then((res) => {
            this.$message({
              message: res.data.data,
              type: "success",
              duration: 1000,
            });
          })
          .catch((err) => {
            this.$message({
              message: err.message,
              duration: 1000,
              type: "error",
            });
          });
        this.codeBtn();
      } else {
        this.$refs.loginForm.validate();
      }
    },

    codeBtn() {
      let time = 60;
      let timer = setInterval(() => {
        if (time == 0) {
          clearInterval(timer);
          this.btnTitle = "获取验证码";
          this.disabled = false;
        } else {
          //倒计时
          this.btnTitle = time + "秒后重试";
          this.disabled = true;
          time--;
        }
      }, 1000);
    },

    //注册
    toRegister() {
      this.$router.push({
        name: "register",
      });
    },

    //邮箱登录
    loginByMail() {
      loginByEmail(
        qs.stringify({
          mail: this.loginForm.mail,
          authCode: this.loginForm.code,
        })
      )
        .then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: res.data.message,
              type: "success",
              duration: 1000,
            });
            sessionStorage.setItem("avatar", res.data.data.avatar);
            sessionStorage.setItem("name", res.data.data.name);
            sessionStorage.setItem("token", res.data.data.token);
            sessionStorage.setItem("id", res.data.data.userId);
            this.$router.push("/dashboard");
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
              duration: 1000,
            });
          }
        })
        .catch((err) => {
          this.$message({
            message: err.message,
            type: "error",
          });
        });
    },
  },
  created() {},
};
</script>

<style>
.login {
  height: 100%;
  width: 100%;
  background-image: url("~@/assets/navImgs/background03.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: -1;
  position: absolute;
}

.loginContainer {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loginForm {
  height: 380px;
  width: 400px;
  box-shadow: 0 0 25px #cac6c6;
  border-radius: 10px;
  padding: 25px 25px;
  z-index: 1;
  position: absolute;
  background-color: white;
}

.loginTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  font-size: 24px;
}

.btn {
  width: 100%;
}
</style>
